<template>
  <div class="login-container">
    <uni-forms 
      ref="formRef"
      :model="formData"
      :rules="rules"
      @submit="handleSubmit"
    >
      <uni-forms-item name="username" label="账号" required>
        <uni-easyinput
          v-model="formData.username"
          placeholder="请输入账号"
        />
      </uni-forms-item>

      <uni-forms-item name="password" label="密码" required>
        <uni-easyinput
          type="password"
          v-model="formData.password"
          placeholder="请输入密码"
        />
      </uni-forms-item>

      <uni-forms-item name="imei" label="做单手机imei">
        <uni-easyinput
          v-model="formData.username"
          placeholder="请输入做单手机imei"
        />
      </uni-forms-item>

      <h1 class="form-title">选择买号：</h1>
      <!-- 添加平台选择 -->
      <checkbox-group @change="checkboxChange" class="checkbox-group">
          <label class="checkbox" v-for="platform in platforms" :key="platform.value">
            <checkbox :value="platform.value" :checked="platform.checked" />
            {{ platform.label }}
          </label>
        </checkbox-group>

      <!-- 连续接单 -->
      <uni-forms-item name="isContinuous" label="是否连续接单">
        <radio-group @change="radioChange" class="radio-group">
          <label class="radio">
            <radio value="1" checked="true" />是
          </label>
          <label class="radio">
            <radio value="0" />否
          </label>
        </radio-group>
      </uni-forms-item>

      <div class="form-group">
        <div class="text-line">
          <label>接单网址：</label>
          <span>http://dmss.dmww.ru</span>
        </div>
      </div>

      <!-- 是否接受阿里任务 -->
      <uni-forms-item name="isContinuous" label="是否接受阿里任务">
        <radio-group @change="radioChange" class="radio-group">
          <label class="radio">
            <radio value="1" checked="true" />是
          </label>
          <label class="radio">
            <radio value="0" />否
          </label>
        </radio-group>
      </uni-forms-item>

      <!-- 选择商返类型 -->
      <uni-forms-item name="isContinuous" label="选择商返类型">
        <radio-group @change="radioChange" class="radio-group">
          <label class="radio">
            <radio value="1" checked="true" />全部
          </label>
          <label class="radio">
            <radio value="2" />平台返
          </label>
          <label class="radio">
            <radio value="3" />商返
          </label>
        </radio-group>
      </uni-forms-item>

      <uni-forms-item name="range1" label="频率设置">
        <view class="range-group">
          <uni-easyinput
            type="number"
            v-model="formData.range1Start"
            placeholder="起始值"
          />
          <text class="range-separator">至</text>
          <uni-easyinput
            type="number"
            v-model="formData.range1End"
            placeholder="结束值"
          />
        </view>
      </uni-forms-item>

      <uni-forms-item name="range2" label="佣金设置">
        <view class="range-group">
          <uni-easyinput
            type="number"
            v-model="formData.range2Start"
            placeholder="起始值"
          />
          <text class="range-separator">至</text>
          <uni-easyinput
            type="number"
            v-model="formData.range2End"
            placeholder="結束值"
          />
        </view>
      </uni-forms-item>

      <uni-forms-item name="range3" label="垫付设置">
        <view class="range-group">
          <uni-easyinput
            type="number"
            v-model="formData.range3Start"
            placeholder="起始值"
          />
          <text class="range-separator">至</text>
          <uni-easyinput
            type="number"
            v-model="formData.range3End"
            placeholder="結束值"
          />
        </view>
      </uni-forms-item>

      <div class="form-group">
        <div class="text-line">
          <span>卡礼品关键词，多个关键词使用|分割（示例：关键词1|关键词2|关键词3）</span>
        </div>
      </div>
      <uni-forms-item name="range2" label="请输入关键词">
        <uni-easyinput
            type="text"
            v-model="formData.range2Start"
            placeholder="请输入关键词"
          />
      </uni-forms-item>

      <view class="button-group">
        <button @click="submitForm('formRef')" class="submit-button">获取买号</button>
        <button @click="submitForm('formRef')" class="submit-button">添加</button>
      </view>
    </uni-forms>
    <!-- 添加说明文字 -->
    <div class="form-description">不建议卡本佣，取消多了会限制接单</div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 修改類型定義
type FormInstance = any // 臨時使用 any 類型

const formRef = ref<FormInstance>()

interface FormData {
  username: string
  password: string
  accountType: string
  isContinuous: boolean | null
  selectedPlatforms: string[]
  range1Start: number | null
  range1End: number | null
  range2Start: number | null
  range2End: number | null
  range3Start: number | null
  range3End: number | null
}

const formData = reactive<FormData>({
  username: '',
  password: '',
  accountType: '',
  isContinuous: null,
  selectedPlatforms: [],
  range1Start: null,
  range1End: null,
  range2Start: null,
  range2End: null,
  range3Start: null,
  range3End: null
})

const rules = {
  username: {
    rules: [
      { required: true, errorMessage: '请输入账号' },
      { minLength: 4, errorMessage: '账号长度至少需要4个字符' }
    ]
  },
  password: {
    rules: [
      { required: true, errorMessage: '请输入密码' },
      { minLength: 6, errorMessage: '密码长度至少需要6个字符' }
    ]
  },
  // ... 其他验证规则 ...
}

const submitForm = async (formName: string) => {
  try {
    const valid = await formRef.value?.validate()
    if (valid) {
      console.log('表单提交', formData)
    }
  } catch (err) {
    console.error('表单验证失败', err)
  }
}

const radioChange = (e: { detail: { value: string } }) => {
  formData.isContinuous = e.detail.value === '1'
}

// 添加平台选项数据
const platforms = reactive([
  { label: '淘宝', value: 'taobao', checked: false },
  { label: '天猫', value: 'tmall', checked: false },
  { label: '京东', value: 'jd', checked: false },
  { label: '拼多多', value: 'pdd', checked: false }
])

// 处理复选框变化
const checkboxChange = (e: { detail: { value: string[] } }) => {
  formData.selectedPlatforms = e.detail.value
}

// 添加onLoad生命周期钩子
onLoad((options: any) => {
  if (options.title) {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: options.title
    })
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  max-width: 800px;  // 增加容器宽度以适应水平布局
  margin: 0 auto;
  padding: 20px;

  :deep(.uni-forms-item) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 15px;

    .uni-forms-item__label {
      min-width: 80px;
      margin-right: 10px;
    }

    .uni-forms-item__content {
      flex: 1;
    }
  }

  .range-group {
    display: flex;
    align-items: center;
    gap: 10px;

    .uni-easyinput {
      flex: 1;
    }

    .range-separator {
      padding: 0 5px;
    }
  }

  .button-group {
    display: flex;
    flex-direction: column;  // 改为纵向排列
    gap: 15px;  // 增加按钮之间的间距
    align-items: center;
    margin-top: 20px;

    .submit-button {
      width: 100%;  // 按钮宽度占满
      padding: 12px 0;  // 调整按钮内边距
      background-color: #4CAF50;  // 绿色背景
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover {
        background-color: #45a049;
      }
    }
  }

  .form-title {
    margin: 15px 0;
    color: #4CAF50;
    font-size: 16px;
    text-align: center;
  }

  .radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .form-group {
    .text-line {
      display: flex;
      align-items: center;
      margin: 10px 0;
      
      label {
        min-width: 80px;
        margin-right: 10px;
      }
    }
  }

  .form-description {
    text-align: center;
    color: #666;
    padding: 20px 0;
    font-size: 15px;
  }

  .checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 10px 0;
    font-size: 14px;
    
    .checkbox {
      display: flex;
      align-items: center;
      gap: 5px;

      :deep(uni-checkbox) .uni-checkbox-input {
        border-radius: 50% !important;
        width: 18px !important;
        height: 18px !important;
        border: 1px solid #dcdfe6;
        
        &.uni-checkbox-input-checked {
          background-color: #4CAF50 !important;
          border-color: #4CAF50 !important;
        }
      }
    }
  }
}
</style>